<template>
	<view class="staffInfo">
		<!-- <navBar isBack backColor="#fff" title="个人信息" color="#fff" background="transparent"></navBar> -->
		<nav-bars title="个人信息" bgColor="transparent" fontColor="#fff"></nav-bars>
		<view class="sL_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
		
			<!-- 个人信息 -->
			<view class="sL_nowRatio">
				<view class="infoLeft">
					<image :src="staffInfo.avatar.path?staffInfo.avatar.path:''" mode=""></image>
					<view class="sL_nowRatioItem">
						<span>{{staffInfo.name}}</span>
						<view class="phone" @click="toTelPhone">
							<image src="https://manager.ryz1620.com/static/constr/mobile.png" mode=""></image>
							{{staffInfo.phone}}
						</view>
					</view>
				</view>
				<!-- <view class="infoRight" @tap="toEditInfo">
					<image src="https://manager.ryz1620.com/static/constr/editInfo.png" mode=""></image>
					修改资料
				</view> -->
			</view>
		</view>
		
		<!-- 负责工地列表 -->
		<view class="buildSite" :style="'margin-top:'+navHeight+'rpx;'">
			<h3>负责工地（{{staffInfo.worksite.length}}）</h3>
			<view class="listItem" v-for="(item,index) in staffInfo.worksite" :key="index">
				<view class="itemTop">
					<view class="topLeft">
						{{item.estate}}
						<view class="specInfo">
							{{item.house_area}}m² <span></span> {{item.house_type}} 
						</view>
					</view>
					<image :src="item.thumb_url.path?item.thumb_url.path:''" mode=""></image>
				</view>
				<view class="itemBottom">
					<image src="https://manager.ryz1620.com/static/constr/toto.png" mode=""></image>
					{{item.progress}}
				</view>
			</view>
		</view>
		
		<!-- 删除按钮 -->
		<!-- <view class="btn">
			<button type="default" @click="todel">删除该员工</button>
		</view> -->
	</view>
</template>

<script>
	// import navBar from '@/components/navBar/navBar.vue'
	import service_constr from '@/service/constr.js'
	export default{
		data(){
			return{
				staffInfo:{},
				user_id:null,
				navHeight:150,
			}
		},
		onLoad(options) {
			this.navHeight = 352 - uni.getStorageSync('StatusBarHeight').height*2
			this.user_id = options.user_id
			console.log(this.user_id,'user_id')
			this.getStaffInfo()
		},
		onShow() {
			this.getStaffInfo()
		},
		methods:{
			
			// 获取员工信息
			getStaffInfo(){
				service_constr.getStaffInfo({id:this.user_id}).then(res=>{
					console.log(res)
					if(res.code==1){
						this.staffInfo = res.data?res.data:[];
						
					}
				})
			},
			
			// 修改资料按钮
			toEditInfo(){
				uni.navigateTo({
					url:`./addStaff?id=${this.id}`
				})
			},
			
			// 电话按钮
			toTelPhone(){
				// console.log(phone,'电话电话')
				uni.makePhoneCall({
				 	// 手机号
				    phoneNumber:this.staffInfo.phone, 
					// 成功回调
					success: (res) => {
						console.log('调用成功!')	
					},
					// 失败回调
					fail: (res) => {
						console.log('调用失败!')
					}
				});
			},
			
			
			// 删除员工
			todel(){
				let that = this
				uni.showModal({
				    title: '提示',
				    content: '确定删除该员工吗？',
				    success: function (res) {
				        if (res.confirm) {
				            service_constr.delStaff({id:that.id}).then(res=>{
				            	if(res.code==1){
				            		console.log(res)
				            		uni.showToast({
				            			title:'删除成功',
				            			icon:'success'
				            		})
				            		uni.navigateBack(-1)
				            	}else{
				            		uni.showToast({
				            			title:res.msg,
				            			icon:'none'
				            		})
				            	}
				            })
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			}
				
		}
	}
</script>

<style lang="scss" >
	page{height: 100%;width: 100%;}
	.staffInfo{
		width: 100%;
		height: 100%;
		background-color: #fff;
		.sL_topImg{width: 100%;height: 352rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		
		// 个人信息
		.sL_nowRatio{
			width: 100%;
			height: 120rpx;
			position: absolute;
			z-index: 2;
			// margin-top: 14rpx;
			bottom: 40rpx;
			left: 0rpx;
			padding: 0 32rpx 0 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font: 500 60rpx/52rpx PingFang SC;
			color: #fff;
			.infoLeft{
				image{width: 120rpx;height: 120rpx;border-radius: 8rpx;}
				display: flex;
				align-items: center;
				.sL_nowRatioItem{
					margin-left: 16rpx;
					display: flex;
					flex-direction: column;
					justify-content: center;
					font: 400 36rpx/50rpx PingFang SC;
					image{
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}
					.phone{
						display: flex;
						align-items: center;
						margin-top: 12rpx;
						image{width: 24rpx;height: 24rpx;margin-right: 16rpx;}
						font: 400 28rpx/40rpx PingFang SC;
						color: #CBAF87;
					}
				}
			}
			.infoRight{
				image{width: 24rpx;height: 24rpx;}
				padding: 0 30rpx;
				width: 194rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 52rpx;
				font: 400 24rpx/34rpx PingFang SC;
				border: 2rpx solid #fff;
				border-radius: 26rpx;
			}
		}
		
		// 工地列表
		.buildSite{
			width: 100%;
			padding:40rpx 0;
			margin-bottom: 20rpx;
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			h3{margin:10rpx 0 28rpx 32rpx; font: 400 36rpx/50rpx PingFang SC;color: #333333;}
			.listItem{
				margin:0 auto 40rpx;
				width: 686rpx;
				height: 218rpx;
				display: flex;
				flex-direction: column;
				background-color: #F9F6F3;
				border-radius: 16rpx;
				color: #333;
				padding: 22rpx 20rpx 28rpx 40rpx;
				.itemTop{
					display: flex;
					justify-content: space-between;
					align-items: center;
					font: bold 28rpx/40rpx PingFang SC;
					.topLeft{
						display: flex;
						flex-direction: column;
						.specInfo{
							display: flex;
							align-items: center;
							padding: 10rpx 16rpx;
							background-color: #fff;
							border-radius: 8rpx;
							font: 400 22rpx/32rpx PingFang SC;
							span{
								width: 0;
								height: 10rpx;
								border: 1rpx solid #333;
								margin: 0 24rpx;
								opacity: .5;
							}
						}
					}
					image{width: 100rpx;height: 100rpx;border-radius: 50%;}
				}
				.itemBottom{
					margin-top: 30rpx;
					display: flex;
					align-items: center;
					image{width: 28rpx;height: 28rpx;margin-right: 10rpx;}
				}
			}
		}
		
		// 删除按钮
		.btn{
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			background-color: #fff;
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			button{
				margin: 20rpx auto;
				width: 606rpx;
				height: 80rpx;
				background-color: #E7AD14;
				border-radius: 46rpx;
				font: 500 32rpx/80rpx PingFang SC;
				color: #fff;
			}
		}
	}
</style>
